<template>
	<view>
		<topTitle :name="`银行卡列表`" right back class="bg_w"/>
		<view class="content">
			<view class="bank" v-if="list.length">
				<view class="bank-item" v-for="item in list" @click.stop="chooseBank(item)">
					<view class="flex fs14 mb28 fw-bold">
						<view>{{item.bankName}}</view>
						<view class="ml20">{{item.cardType | typeFilter}}</view>
					</view>
					<view class="fs14 mgy-10 mb28">
						银行卡号:{{item.bankAccountNo}}
					</view>
					<view class="flex j-c-b f-a-c mb28">
						<view class="fs14">银行预留手机号:{{item.bankMobile}}</view>
					</view>
					<view class="flex j-c-f">
						<view class="fs14 btn" @click.stop="doUnbind(item.id)">解绑</view>
					</view>
				</view>
			</view>
			<view v-else class="flex f-e j-c-c f-a-c mt300">
				<image class="w-460" mode="widthFix" src="/static/img/default.png"></image>
				<view class="color-9 mt14 text-c">暂无绑定的银行卡信息</view>
			</view>
			<view class="set bg-theme color-w" @click="addBank">
				新增银行卡
			</view>
		</view>
	</view>
</template>

<script>
	export default {
		data() {
			return {
				list:[],
				status:0,
				isChoose:0
			}
		},
		onLoad(options) {
			this.isChoose = options.isChoose
			this.getStatus()
		},
		onShow(){
			this.getList()
		},
		methods: {
			chooseBank(item){
				if(this.isChoose){
					let pages = getCurrentPages()
					let prvePage = pages[pages.length-1]
					prvePage.bankInfo = item
					uni.navigateBack()
				}
			},
			addBank(){
				if(this.status==0){
					uni.navigateTo({
						url:'/pages/my/registerWallet'
					})
				}else{
					uni.navigateTo({
						url:'/pages/my/bankAdd'
					})
				}
			},
			getStatus(){
				this.util.req(this.api.apiMemberWallet).then(res=>{
					this.status = res.status
				})
			},
			getList(){
				this.util.req(this.api.apiBankList).then(res=>{
					this.list = res
				})
			},
			doUnbind(id){
				this.util.req(this.api.apiDoUnbind,{
					id:id
				}).then(res=>{
					uni.showToast({
						title:'解除成功'
					})
					this.getList()
				})
			},
		}
	}
</script>
<style>
	page{
		background: #f5f5f5;
	}
</style>
<style lang="scss" scoped>
.mt300{
	margin-top: 300rpx;
}
.mt14 {
	margin-top: 14rpx;
}
.text-c{
	text-align: center;
}
.w-460{
	width: 460rpx;
}
.mb28{
	margin-bottom: 28rpx;
}
.fw-bold{
	font-weight: bold;
}
.bank{
	padding:20rpx 32rpx;
	.bank-item{
		background-color: #ffffff;
		border-radius: 16rpx;
		border:1px solid #eeeeee;
		padding:30rpx 20rpx;
		margin-bottom: 20rpx;
		.btn{
			width: 100rpx;
			height: 56rpx;
			border-radius: 8rpx;
			background-color: #EC6C01;
			color: #ffffff;
			text-align: center;
			line-height: 56rpx;
			font-size: 24rpx;
		}
	}
}
.set {
	width: 688rpx;
	height: 92rpx;
	line-height: 92rpx;
	border-radius: 20rpx;
	text-align: center;
	margin: 0 auto;
	font-size: 28rpx;
	position: fixed;
	bottom: 20px;
	left: 0;
	right: 0;
}
</style>
